import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";
import {
  View,
  Text,
  Button,
  Image,
  Input,
  Video,
  CoverView,
  Swiper,
  SwiperItem,
} from "@tarojs/components";
import Taro, { useShareAppMessage } from "@tarojs/taro";
import { useState, useEffect } from "react";
import PreviewModal from "../../components/PreviewModal";
import "./index.scss";

// 图标资源
const ICONS = {
  link: "https://api.iconify.design/material-symbols:link.svg",
  plus: "https://api.iconify.design/material-symbols:add.svg",
  download: "https://api.iconify.design/material-symbols:download-rounded.svg",
  paste:
    "https://api.iconify.design/material-symbols:content-paste-rounded.svg",
  submit:
    "https://api.iconify.design/material-symbols:magic-button-rounded.svg",
  close: "https://api.iconify.design/material-symbols:close-rounded.svg",
  loading: "https://api.iconify.design/line-md:downloading-loop.svg",
  photo: "https://api.iconify.design/material-symbols:photo-camera.svg",
  video: "https://api.iconify.design/material-symbols:videocam.svg",
  done: "https://api.iconify.design/material-symbols:check-circle.svg",
  cat: "https://api.iconify.design/mdi:cat.svg",
  fire: "https://api.iconify.design/mdi:fire.svg",
  star: "https://api.iconify.design/mdi:star.svg",
  heart: "https://api.iconify.design/mdi:heart.svg",
  sparkles: "https://api.iconify.design/mdi:sparkles.svg",
  rocket: "https://api.iconify.design/mdi:rocket-launch.svg",
  search: "https://api.iconify.design/material-symbols:search.svg",
  panda: "https://api.iconify.design/mdi:panda.svg",
  rabbit: "https://api.iconify.design/mdi:rabbit.svg",
  duck: "https://api.iconify.design/mdi:duck.svg",
  butterfly: "https://api.iconify.design/mdi:butterfly.svg",
  flower: "https://api.iconify.design/mdi:flower.svg",
  rainbow: "https://api.iconify.design/mdi:rainbow.svg",
  cloud: "https://api.iconify.design/mdi:cloud.svg",
  balloon: "https://api.iconify.design/mdi:balloon.svg",
  iceCream: "https://api.iconify.design/mdi:ice-cream.svg",
  cookie: "https://api.iconify.design/mdi:cookie.svg",
  cupcake: "https://api.iconify.design/mdi:cupcake.svg",
  gift: "https://api.iconify.design/mdi:gift.svg",
};

enum IMediaType {
  IMAGE = "photo",
  VIDEO = "video",
}

interface ISource {
  type: IMediaType;
  data: string;
}

interface IPreviewData {
  type: "text" | "image" | "video" | "carousel";
  data: any;
}

enum IStep {
  READY,
  RUN,
  DONE,
}

// 定义接口响应数据类型
interface IStreamPart {
  url: string;
  size: number;
  ext: string;
}

interface IStream {
  id: string;
  quality: string;
  parts: IStreamPart[];
  size: number;
  ext: string;
  NeedMux: boolean;
}

interface IExtractedData {
  url: string;
  site: string;
  title: string;
  type: "video" | "image";
  streams: Record<string, IStream>;
  caption: string | null;
  err: string | null;
}

interface IApiResponse {
  data: IExtractedData[];
  first_link: string;
  links: string[];
}

export default function Index() {
  const [input, setInput] = useState("");
  const [step, setStep] = useState<IStep>(IStep.READY);
  const [sources, setSources] = useState<ISource[]>([]);
  const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null);
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
  const [previewData, setPreviewData] = useState<IPreviewData | null>(null);
  const [isPreviewVisible, setIsPreviewVisible] = useState(false);

  const safeHeight =
    Taro.getMenuButtonBoundingClientRect().top +
    Taro.getMenuButtonBoundingClientRect().height;

  // 页面加载时检查是否有来自剪贴板的链接参数
  useEffect(() => {
    Taro.getCurrentInstance().router?.params?.clipboardUrl &&
      setInput(decodeURIComponent(Taro.getCurrentInstance().router?.params?.clipboardUrl));
  }, []);

  useShareAppMessage(() => {
    return {
      title: "西瓜猫",
    };
  });

  // 显示成功消息的效果
  useEffect(() => {
    if (showSuccessMessage) {
      const timer = setTimeout(() => {
        setShowSuccessMessage(false);
      }, 2000);
      return () => clearTimeout(timer);
    }
  }, [showSuccessMessage]);

  // 当有输入内容时自动触发搜索
  useEffect(() => {
    if (input && step === IStep.READY) {
      // 检查是否是有效链接
      const urlRegex = /(https?:\/\/[^\s|，|,| ]+)/g;
      const urls = input.match(urlRegex);
      if (urls && urls.length > 0) {
        // 延迟一小段时间后自动搜索，避免用户还在输入时就触发
        const timer = setTimeout(() => {
          handleSearch();
        }, 500);
        return () => clearTimeout(timer);
      }
    }
  }, [input, step]);

  const handleSearch = async () => {
    if (step !== IStep.READY) return;
    setStep(IStep.RUN);
    setInput("");
    const url = input.indexOf("http") === 0 ? input : ``;
    const text = input.indexOf("http") > 0 ? input : ``;
    const { data } = await Taro.request({
      url: "https://lux.leeapp.cn/api/extract",
      method: "POST",
      header: {
        "content-type": "application/x-www-form-urlencoded",
        charset: "utf-8",
      },
      data: {
        url,
        text,
      },
    });

    console.log(data);
    if (data.data && Array.isArray(data.data) && data.data.length > 0) {
      const extractedSources: ISource[] = [];

      data.data.forEach((item: IExtractedData) => {
        if (item.type === "video" && item.streams) {
          // 处理视频资源
          Object.values(item.streams).forEach((stream) => {
            if (stream.parts && stream.parts.length > 0) {
              stream.parts.forEach((part) => {
                extractedSources.push({
                  type: IMediaType.VIDEO,
                  data: part.url
                });
              });
            }
          });
        } else if (item.type === "image" && item.streams) {
          // 处理图片资源
          Object.values(item.streams).forEach((stream) => {
            if (stream.parts && stream.parts.length > 0) {
              stream.parts.forEach((part) => {
                extractedSources.push({
                  type: IMediaType.IMAGE,
                  data: part.url
                });
              });
            }
          });
        }
      });

      setSources(extractedSources);
      setStep(IStep.DONE);
    } else {
      Taro.showToast({
        title: data.error || "解析失败，请检查链接是否正确",
        icon: "error",
        duration: 1000,
      });
      setStep(IStep.READY);
    }
  };

  const handleSearchPaste = async () => {
    Taro.getClipboardData({
      success: (res) => {
        setInput(res.data);
        handleSearch();
      },
    });
  };

  const handleDownload = async (source: ISource, index: number) => {
    setDownloadingIndex(index);
    await handleDown(source.data, source.type);
    setDownloadingIndex(null);
    setShowSuccessMessage(true);
  };

  const saveFile = (filePath: string, type: IMediaType) => {
    if (type === IMediaType.VIDEO) {
      Taro.saveVideoToPhotosAlbum({
        filePath,
      }).then(() =>
        Taro.showToast({
          title: "保存成功",
          icon: "success",
          duration: 1500,
        }),
      );
    } else {
      Taro.saveImageToPhotosAlbum({
        filePath,
      }).then(() =>
        Taro.showToast({
          title: "保存成功",
          icon: "success",
          duration: 1500,
        }),
      );
    }
  };

  const handleDown = (url: string, type: IMediaType) => {
    return new Promise<void>((resolve) => {
      Taro.downloadFile({
        url,
        success: (res) => {
          console.log("downloadFile:", res);
          Taro.getSetting().then((res1) => {
            if (!res1.authSetting["scope.writePhotosAlbum"]) {
              Taro.authorize({
                scope: "scope.writePhotosAlbum",
              }).then(() => {
                saveFile(res.tempFilePath, type);
                resolve();
              });
            } else {
              saveFile(res.tempFilePath, type);
              resolve();
            }
          });
          Taro.getFileSystemManager().saveFile({
            tempFilePath: res.tempFilePath,
            success: (result) => {
              console.log("saveFile:", result);
            },
            fail: (result) => {
              console.log("saveFile fail:", result);
              resolve();
            },
          });
        },
        fail: (res) => {
          console.log("downloadFile fail:", res);
          Taro.showToast({
            title: "下载失败",
            icon: "error",
            duration: 1500,
          });
          resolve();
        },
      });
    });
  };

  // 预览功能
  const handlePreview = (
    type: "text" | "image" | "video" | "carousel",
    data: any,
  ) => {
    setPreviewData({ type, data });
    setIsPreviewVisible(true);
  };

  // 关闭预览
  const closePreview = () => {
    setIsPreviewVisible(false);
    setPreviewData(null);
  };

  return (
    <View
      className="flex flex-col items-center justify-between relative min-h-screen p-4 box-border w-screen"
      style={{ paddingTop: `${safeHeight}rpx` }}
    >
      {/* 背景元素 */}
      <View className="fixed top-0 left-0 w-full h-full bg-gradient-to-br from-pink-100 to-blue-100 z-0"></View>
      <View className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_25%_25%,rgba(255,192,203,0.2)_1%,transparent_5%),radial-gradient(circle_at_75%_75%,rgba(173,216,230,0.2)_1%,transparent_5%),radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.2)_1%,transparent_5%)] bg-100px bg-100px opacity-50"></View>
      <View className="absolute rounded-full bg-gradient-to-br from-white/80 to-white/20 shadow-sm-4px-15px-rgba(0,0,0,0.05) animate-float z-0 w-80px h-80px top-10% left-10% animation-delay-0s"></View>
      <View className="absolute rounded-full bg-gradient-to-br from-white/80 to-white/20 shadow-sm-4px-15px-rgba(0,0,0,0.05) animate-float z-0 w-60px h-60px top-20% right-15% animation-delay-1s"></View>
      <View className="absolute rounded-full bg-gradient-to-br from-white/80 to-white/20 shadow-sm-4px-15px-rgba(0,0,0,0.05) animate-float z-0 w-40px h-40px bottom-15% left-20% animation-delay-2s"></View>
      <View className="absolute rounded-full bg-gradient-to-br from-white/80 to-white/20 shadow-sm-4px-15px-rgba(0,0,0,0.05) animate-float z-0 w-100px h-100px bottom-25% right-10% animation-delay-3s"></View>

      {/* 新增可爱装饰元素 */}
      <View className="absolute top-10% left-10% z-0 animate-float filter-drop-shadow-0-5px-15px-rgba(0,0,0,0.1)">
        <Image
          className="w-8 h-8"
          style={{ animationDelay: "0.2s" }}
          src={ICONS.butterfly}
        />
      </View>
      <View
        className="absolute top-20% left-20% z-0 animate-float filter-drop-shadow-0-5px-15px-rgba(0,0,0,0.1)"
        style={{ top: "20%", left: "20%" }}
      >
        <Image
          className="w-8 h-8"
          style={{ animationDelay: "0.5s" }}
          src={ICONS.flower}
        />
      </View>
      <View
        className="absolute bottom-20% left-45% z-0 animate-float filter-drop-shadow-0-5px-15px-rgba(0,0,0,0.1)"
        style={{ bottom: "20%", left: "45%" }}
      >
        <Image
          className="w-10 h-10"
          style={{ animationDelay: "0.8s" }}
          src={ICONS.cloud}
        />
      </View>
      <View
        className="absolute top-60% right-75% z-0 animate-float filter-drop-shadow-0-5px-15px-rgba(0,0,0,0.1)"
        style={{ top: "60%", right: "75%" }}
      >
        <Image
          className="w-8 h-8"
          style={{ animationDelay: "1.2s" }}
          src={ICONS.balloon}
        />
      </View>
      <View className="absolute top-5% right-5% z-0 opacity-70 transform-rotate-10deg filter-drop-shadow-0-5px-15px-rgba(0,0,0,0.1)">
        <Image className="w-16 h-16" src={ICONS.rainbow} />
      </View>

      {/* 页面标题 */}
      <View className="w-full flex items-center justify-center mb-4">
        <View className="flex items-center">
          <Image className="w-6 h-6 mr-2 animate-bounce" src={ICONS.cupcake} />
          <Text className="text-xl font-bold font-comic-sans">西瓜猫</Text>
          <Image className="w-6 h-6 ml-2 animate-bounce" src={ICONS.cupcake} />
        </View>
      </View>

      {/* 主体内容 */}
      <View className="flex-1 flex flex-col items-center justify-center w-full mt-4">
        <View className="cat-run"></View>
        <View className="p-5 w-full mt-6 rounded-30px bg-white/90 shadow-0-15px-35px-rgba(255,182,193,0.3) border-2px border-dashed border-pink-300/50 overflow-hidden relative">
          {/* 输入框 */}
          <View className="flex gap-2 items-center p-3 mb-4 rounded-25px border-2px border-pink-300/50 bg-white/95">
            <Image className="w-5 h-5 block" src={ICONS.link} />
            <Input
              className="flex-1 p-1"
              type="text"
              placeholder="粘贴链接下载..."
              value={input}
              onInput={(e) => setInput(e.detail.value)}
            />
            {input && (
              <View
                className="w-6 h-6 flex items-center justify-center rounded-full bg-gray-200"
                onClick={() => setInput("")}
              >
                <Image className="w-4 h-4 block" src={ICONS.close} />
              </View>
            )}
          </View>

          {/* 操作按钮 */}
          <View className="flex gap-4 mt-4">
            <Button
              className="flex-1 flex items-center justify-center rounded-25px bg-gradient-to-r from-pink-300 to-pink-400 text-white font-bold shadow-0-8px-20px-rgba(255,182,193,0.4) border-none animate-heartbeat active:transform-translate-y-3px active:scale-98 active:shadow-0-4px-10px-rgba(255,182,193,0.3)"
              onClick={() => handleSearch()}
            >
              <Image className="w-5 h-5 mr-2" src={ICONS.search} />
              <Text>搜索</Text>
            </Button>
            <Button
              className="flex-1 flex items-center justify-center rounded-25px bg-gradient-to-r from-pink-300 to-pink-400 text-white font-bold shadow-0-8px-20px-rgba(255,182,193,0.4) border-none animate-heartbeat active:transform-translate-y-3px active:scale-98 active:shadow-0-4px-10px-rgba(255,182,193,0.3)"
              onClick={() => handleSearchPaste()}
            >
              <Image className="w-5 h-5 mr-2" src={ICONS.paste} />
              <Text>粘贴并下载</Text>
            </Button>
          </View>

          {/* 提示信息 */}
          <View className="mt-5 flex items-center justify-center">
            <Image className="w-5 h-5 mr-2 animate-pulse" src={ICONS.gift} />
            <Text className="text-sm text-gray-500 font-comic-sans">
              支持多平台无水印下载
            </Text>
          </View>
        </View>

        {/* 加载状态 */}
        {step === IStep.RUN && (
          <View className="flex flex-col items-center justify-center p-30px mt-10 rounded-30px bg-white/95 shadow-0-15px-35px-rgba(173,216,230,0.3) border-2px border-dashed border-blue-300/50 animate-fadeIn">
            <Image
              className="w-20 h-20 block animate-rotate"
              src={ICONS.loading}
            />
            <Text className="mt-15px font-500 text-gray-600 font-comic-sans relative">
              正在获取资源
            </Text>
            <View className="flex mt-4">
              <Image
                className="w-6 h-6 mx-1 animate-bounce"
                style={{ animationDelay: "0s" }}
                src={ICONS.iceCream}
              />
              <Image
                className="w-6 h-6 mx-1 animate-bounce"
                style={{ animationDelay: "0.2s" }}
                src={ICONS.cookie}
              />
              <Image
                className="w-6 h-6 mx-1 animate-bounce"
                style={{ animationDelay: "0.4s" }}
                src={ICONS.iceCream}
              />
            </View>
          </View>
        )}
      </View>

      {/* 下载结果弹窗 */}
      {step === IStep.DONE && (
        <View
          className="absolute w-full h-full top-0 left-0 flex z-10"
          style="background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px);"
        >
          <View className="w-full mt-auto p-6 box-border rounded-30px-30px-0-0 bg-white/95 shadow-0--10px-30px-rgba(255,182,193,0.3) border-t-2px border-l-2px border-r-2px border-dashed border-pink-300/50 relative overflow-hidden animate-slideUp max-h-90vh overflow-y-auto">
            <View className="flex items-center justify-between mb-5">
              <View className="flex items-center">
                <Image className="w-7 h-7 block mr-3" src={ICONS.panda} />
                <View>
                  <Text className="text-lg font-bold font-comic-sans">
                    可下载内容
                  </Text>
                  <Text className="text-xs text-gray-500 block">
                    点击卡片预览，点击下载按钮保存
                  </Text>
                </View>
              </View>
              <View
                className="w-40px h-40px rounded-50% bg-white/95 flex items-center justify-center shadow-0-5px-15px-rgba(255,182,193,0.3) border-2px border-pink-300/30 active:transform-scale-0.9 active:shadow-0-2px-8px-rgba(255,182,193,0.1)"
                onClick={() => setStep(IStep.READY)}
              >
                <Image className="w-5 h-5 block" src={ICONS.close} />
              </View>
            </View>

            {/* 分版块显示内容 */}
            <View className="mt-4 max-h-60vh overflow-y-auto">
              {/* 文本内容版块 */}
              <View className="mb-6 hidden">
                <View className="flex items-center mb-3">
                  <View className="w-4px h-20px bg-gradient-to-b from-indigo-500 to-purple-600 rounded-2px"></View>
                  <Text className="font-bold ml-2 text-gray-600">文本内容</Text>
                </View>
                <View
                  className="p-4 rounded-lg bg-gradient-to-r from-gray-100 to-gray-200 border-1px border-gray-300 transition-all-300ms cursor-pointer active:transform-translate-y--2px active:shadow-0-5px-15px-rgba(0,0,0,0.1)"
                  onClick={() =>
                    handlePreview("text", {
                      text: "这是提取的文本内容示例。在这里可以显示从链接中提取的文本内容，用户可以点击进行预览和编辑。",
                    })
                  }
                >
                  <Text className="text-gray-700">
                    这是提取的文本内容示例。在这里可以显示从链接中提取的文本内容，用户可以点击进行预览和编辑。
                  </Text>
                </View>
              </View>

              {/* 图片资源版块 */}
              <View className="mb-6">
                <View className="flex items-center mb-3">
                  <View className="w-4px h-20px bg-gradient-to-b from-indigo-500 to-purple-600 rounded-2px"></View>
                  <Text className="font-bold ml-2 text-gray-600">图片资源</Text>
                </View>

                {sources.filter((s) => s.type === IMediaType.IMAGE).length >
                  0 ? (
                  <View>
                    {sources.filter((s) => s.type === IMediaType.IMAGE)
                      .length === 1 ? (
                      // 单张图片显示
                      <View
                        className="rounded-16px overflow-hidden shadow-0-10px-30px-rgba(0,0,0,0.15) cursor-pointer transition-all-300ms active:transform-scale-1.02 active:shadow-0-15px-35px-rgba(0,0,0,0.2)"
                        onClick={() =>
                          handlePreview("image", {
                            url: sources.find(
                              (s) => s.type === IMediaType.IMAGE,
                            )?.data,
                          })
                        }
                      >
                        <Image
                          className="w-full h-48 object-cover rounded-lg"
                          src={
                            sources.find((s) => s.type === IMediaType.IMAGE)
                              ?.data as string
                          }
                          mode="aspectFill"
                        />
                      </View>
                    ) : (
                      // 多张图片轮播显示
                      <Swiper
                        className="h-48 rounded-lg shadow-0-10px-30px-rgba(0,0,0,0.15)"
                        indicatorDots
                        autoplay
                        circular
                      >
                        {sources
                          .filter((s) => s.type === IMediaType.IMAGE)
                          .map((source, index) => (
                            <SwiperItem key={index}>
                              <View
                                className="cursor-pointer"
                                onClick={() =>
                                  handlePreview("carousel", {
                                    images: sources
                                      .filter(
                                        (s) => s.type === IMediaType.IMAGE,
                                      )
                                      .map((s) => s.data),
                                  })
                                }
                              >
                                <Image
                                  className="w-full h-48 object-cover"
                                  src={source.data}
                                  mode="aspectFill"
                                />
                              </View>
                            </SwiperItem>
                          ))}
                      </Swiper>
                    )}
                  </View>
                ) : (
                  <View className="p-4 text-center text-gray-500 bg-gradient-to-r from-gray-100 to-gray-200 rounded-12px border-1px border-dashed border-gray-300">
                    暂无图片资源
                  </View>
                )}
              </View>

              {/* 视频资源版块 */}
              <View className="mb-6">
                <View className="flex items-center mb-3">
                  <View className="w-4px h-20px bg-gradient-to-b from-indigo-500 to-purple-600 rounded-2px"></View>
                  <Text className="font-bold ml-2 text-gray-600">视频资源</Text>
                </View>

                {sources.filter((s) => s.type === IMediaType.VIDEO).length >
                  0 ? (
                  <View className="flex flex-wrap gap-4">
                    {sources
                      .filter((s) => s.type === IMediaType.VIDEO)
                      .map((source, index) => (
                        <View key={index} className="w-full">
                          <View
                            className="relative rounded-lg overflow-hidden cursor-pointer transition-all-300ms active:transform-scale-1.02"
                            onClick={() =>
                              handlePreview("video", { url: source.data })
                            }
                          >
                            <Video
                              className="w-full h-48 object-cover"
                              src={source.data}
                              controls={false}
                              loop
                              autoplay
                              muted
                              objectFit="cover"
                            />
                            <View className="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center transition-all-300ms active:bg-opacity-20">
                              <Image
                                className="w-12 h-12 opacity-80"
                                src="https://api.iconify.design/material-symbols:play-arrow-rounded.svg"
                              />
                            </View>
                          </View>
                        </View>
                      ))}
                  </View>
                ) : (
                  <View className="p-4 text-center text-gray-500 bg-gradient-to-r from-gray-100 to-gray-200 rounded-12px border-1px border-dashed border-gray-300">
                    暂无视频资源
                  </View>
                )}
              </View>
            </View>

            {/* 下载按钮区域 */}
            <View className="mt-6">
              <Text className="block text-center text-gray-500 mb-3">
                点击下方按钮保存所有资源
              </Text>
              <Button
                className="mt-2 flex items-center justify-center mx-auto rounded-25px bg-gradient-to-r from-pink-300 to-pink-400 text-white font-bold shadow-0-8px-20px-rgba(255,182,193,0.4) border-none animate-heartbeat active:transform-translate-y-3px active:scale-98 active:shadow-0-4px-10px-rgba(255,182,193,0.3)"
                onClick={() => {
                  sources.forEach((source, index) => {
                    handleDownload(source, index);
                  });
                }}
              >
                <Image className="w-5 h-5 mr-2" src={ICONS.download} />
                <Text>全部下载</Text>
              </Button>
            </View>

            <Button
              className="mt-6 flex items-center justify-center mx-auto rounded-25px bg-gradient-to-r from-pink-300 to-pink-400 text-white font-bold shadow-0-8px-20px-rgba(255,182,193,0.4) border-none animate-heartbeat w-2/3 active:transform-translate-y-3px active:scale-98 active:shadow-0-4px-10px-rgba(255,182,193,0.3)"
              onClick={() => setStep(IStep.READY)}
            >
              <Image className="w-5 h-5 mr-2" src={ICONS.done} />
              <Text>完成</Text>
            </Button>

            {/* 底部装饰 */}
            <View className="flex justify-center mt-6">
              <Image
                className="w-6 h-6 mx-1 animate-float"
                style={{ animationDelay: "0s" }}
                src={ICONS.heart}
              />
              <Image
                className="w-6 h-6 mx-1 animate-float"
                style={{ animationDelay: "0.3s" }}
                src={ICONS.balloon}
              />
              <Image
                className="w-6 h-6 mx-1 animate-float"
                style={{ animationDelay: "0.6s" }}
                src={ICONS.heart}
              />
            </View>
          </View>
        </View>
      )}

      {/* 预览模态框 */}
      <PreviewModal
        visible={isPreviewVisible}
        type={previewData?.type || "image"}
        data={previewData?.data}
        onClose={closePreview}
      />

      {/* 下载成功提示 */}
      {showSuccessMessage && (
        <View className="fixed top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/3 flex items-center bg-white/95 text-pink-500 rounded-25px p-12px-24px shadow-0-10px-25px-rgba(255,182,193,0.4) border-2px border-dashed border-pink-300/50 animate-pop">
          <Image className="w-6 h-6 mr-2 animate-bounce" src={ICONS.duck} />
          <Text className="font-comic-sans">下载成功，已保存到相册</Text>
        </View>
      )}

      {/* 底部信息 */}
      <View className="w-full mt-6 flex flex-col items-center justify-center">
        <View className="flex items-center mb-2">
          <Image className="w-5 h-5 mx-1 animate-float" src={ICONS.flower} />
          <Image
            className="w-5 h-5 mx-1 animate-float"
            style={{ animationDelay: "0.2s" }}
            src={ICONS.heart}
          />
          <Image
            className="w-5 h-5 mx-1 animate-float"
            style={{ animationDelay: "0.4s" }}
            src={ICONS.flower}
          />
        </View>
        <Text className="text-xs text-gray-500 font-comic-sans">
          © 2025 西瓜猫 - 下载工具
        </Text>
      </View>
    </View>
  );
}
